// functionPage/pages/chooseArea/chooseArea.js
import throttle from '../../../utils/throttle.js'

const app = getApp()
// 滚动高度
let scrollTopInside = 0;

// city-bar-item据顶部高度
let barToTop;

// 每个索引bar的高度
let itemHeight;

// 后面滚动区域有所修改，可以认为是scroll-view顶部距离屏幕顶部的高度
let switchBottom = 0;
Page({

    /**
     * 页面的初始数据
     */
    data: {
        // 所有的区域列表 
        allAreaObject: {},
        allArea: [],
        indexList: [],
        // 右侧激活的首字母索引
        activeAnchorIndex: null,
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function(options) {
        this.getRegionList('allAreaObject', 'allArea', 'indexList');
    },

    // 获取所有城市和地区
    getRegionList(objName, arrName, indexName) {
        let _that = this;
        wx.request({
            url: app.globalData.rootPath + 'cjMap/getRegionList',
            data: {
                authId: app.globalData.authId
            },
            success(res) {
                if (res.data.status === '0') {
                    // 获取所有首字母数据，并将有数据的城市和索引放入相关的数组中
                    _that.setData({
                        [objName]: res.data.data
                    }, () => {
                        // 定义一个暂时的空数组
                        let tempRecordCity = [];
                        let tempIndexList = [];
                        for (let key of Object.keys(_that.data[objName])) {
                            if (_that.data[objName][key].length > 0) {
                                tempRecordCity.push(_that.data[objName][key])
                                tempIndexList.push(key)
                            }
                        }
                        // 数据处理完成后再去获取对应元素的高度等数据
                        _that.setData({
                            [arrName]: tempRecordCity,
                            [indexName]: tempIndexList
                        }, () => {
                            _that.getElementData();
                        })
                    })
                }
            }
        })
    },

    onBarTouchMove(e) {
        const sidebarLength = this.data.indexList.length;
        const touch = e.touches[0];
        console.log(touch.clientY, barToTop);
        let index = Math.floor((touch.clientY - barToTop) / itemHeight);
        if (index < 0) {
            index = 0;
        } else if (index > sidebarLength - 1) {
            index = sidebarLength - 1;
        }
        this.scrollToAnchor(index);
        console.log(index);
    },
    onBarTouchStop(e) {
        this.setData({
            activeAnchorIndex: null
        })
    },
    scrollToAnchor(index) {
        if (typeof index !== 'number' || this.data.activeAnchorIndex === index) {
            return;
        }
        this.setData({
            activeAnchorIndex: index
        })

        let query = wx.createSelectorQuery();
        query.select(`.record-city-index${index}`).boundingClientRect();
        query.selectViewport().scrollOffset();

        query.exec((res) => {
            console.log(res);
            this.setData({
                scrollTop: scrollTopInside + res[0].top - switchBottom
            }, () => {
                scrollTopInside = scrollTopInside + res[0].top - switchBottom
                console.log(scrollTopInside)
            })
        })
    },
    onScroll(e) {
        // 监听滚动事件
        scrollTopInside = e.detail.scrollTop;
    },

    // 获取相关元素高度等数据
    getElementData() {

        // let query = wx.createSelectorQuery();
        // query.select('.all-city').boundingClientRect();
        // query.exec((res) => {
        //     switchBottom = res[0].bottom
        // })

        let queryCityBarItem = wx.createSelectorQuery();
        queryCityBarItem.select('.city-bar-item0').boundingClientRect();
        queryCityBarItem.exec((res) => {
            itemHeight = res[0].height;
        })

        let queryCityBar = wx.createSelectorQuery();
        queryCityBar.select('.city-bar-national').boundingClientRect();
        queryCityBar.exec((res) => {
            barToTop = res[0].top
        })

    },

    chooseArea(e) {
        console.log(e);
        let {
            pinyinsimple,
            pinyindetail,
            countryorarea
        } = e.currentTarget.dataset
        let pages = getCurrentPages(); //当前页面栈
        let prevPage = pages[pages.length - 2]; //上一页面
        prevPage.setData({
            pinyinsimple,
            pinyindetail,
            countryOrArea: countryorarea
        }, () => {
            wx.navigateBack({
                detal: 1
            })
        })
    }
})